@import "reset.less";

body {
  margin      : 0;
  padding     : 0;
  background  : #333;
  font-family : "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

.page-content {
  position    : fixed;
  z-index     : 1;
  width       : 320px;
  height      : 450px;
  left        : 50%;
  top         : 50%;
  margin-left : -160px;
  margin-top  : -225px;
}

.bg {
  display  : block;
  position : fixed;
  z-index  : -1;
  width    : 100%;
  height   : 100%;
  left     : 0;
  top      : 0;
}

.hand, .arrow {
  background      : url("../images/titleandtip.png") no-repeat;
  background-size : 238px 500px;
}

.hand {
  background-position : -15px 0;
}

.arrow {
  background-position : 0 0;
}

.page1 {
  position : absolute;
  z-index  : 500;

  .door {
    display  : block;
    position : fixed;
    width    : 50%;
    height   : 100%;
    top      : 0;
    bottom   : 0;
  }

  .left {
    left  : 0;
    right : 50%;
  }

  .right {
    left  : 50%;
    right : 0;
  }

  &.leave .left {
    -webkit-transform  : translateX(-100%);
    -webkit-transition : all 2s 2s;
  }

  &.leave .right {
    -webkit-transform  : translateX(100%);
    -webkit-transition : all 2s 2s;
  }

  &.leave .page-content {
    opacity: 0.01;
    -webkit-transition: all 1.5s !important;
  }

  .logo {
    position        : absolute;
    width           : 82px;
    height          : 43px;
    top             : 10px;
    left            : 50%;
    margin-left     : -43px;
    background      : url("../images/logo.png") center center no-repeat;
    background-size : 100% 100%;
  }

  .title {
    position        : absolute;
    width           : 188px;
    height          : 116px;
    top             : 63px;
    left            : 50%;
    margin-left     : -94px;
    background      : url("../images/title-open.png") center center no-repeat;
    background-size : 100% 100%;
  }

  .finger {
    position    : absolute;
    width       : 188px;
    height      : 215px;
    bottom      : 10px;
    left        : 50%;
    margin-left : -94px;

    div {
      position        : absolute;
      background      : url("../images/fingerprint.png") no-repeat;
      background-size : 187px 800px;
    }

    .arrows {
      width  : 188px;
      height : 188px;
      left   : 0;
      top    : 0;
      background-position : 0 0;
      -webkit-animation   : breath 0.5s infinite;
      -webkit-transition  : all 1s;
    }

    &.active .arrows, &.done .arrows {
      -webkit-animation  : none;
      -webkit-transform  : scale(1.06, 1.06);
      -webkit-transition : all 1s;
    }

    .circle {
      width       : 148px;
      height      : 148px;
      top         : 20px;
      left        : 50%;
      margin-left : -74px;
      background-position : 0 -195px;
      -webkit-transform   : rotate(0deg);
      -webkit-transition  : all 2s;
    }

    &.active .circle, &.done .circle {
      -webkit-transform  : rotate(720deg);
      -webkit-transition : all 3s;
    }

    .grid {
      width       : 136px;
      height      : 136px;
      top         : 26px;
      left        : 50%;
      margin-left : -68px;
      background-position : 0 -350px;
    }

    .print {
      width       : 94px;
      height      : 104px;
      top         : 38px;
      left        : 50%;
      margin-left : -47px;
      opacity     : 0.01;
      -webkit-transition  : all 3s;
      background-position : 0 -495px;
    }

    &.active .print, &.done .print {
      opacity            : 1;
      -webkit-transition : all 3s;
    }

    .tip {
      width       : 183px;
      height      : 12px;
      bottom      : 5px;
      left        : 50%;
      margin-left : -91px;
      background-position : 0 -610px;
    }
  }

  @-webkit-keyframes roll {
    0%   { -webkit-transform: rotate(0);      }
    100% { -webkit-transform: rotate(360deg); }
  }

  @-webkit-keyframes breath {
    0%   { -webkit-transform: scale(1.02); }
    50%  { -webkit-transform: scale(0.98); }
    100% { -webkit-transform: scale(1.02); }
  }
}

.page2 {
  position : absolute;
  z-index  : 400;

  .title1, .title2, .board .one, .board .words {
    background      : url("../images/page2.png") no-repeat;
    background-size : 243px 75px;
  }

  .title1 {
    position : absolute;
    width    : 80px;
    height   : 28px;
    top      : 40px;
    left     : 35px;
    background-position: 0 0;
    -webkit-transform  : translateY(150px);
    -webkit-transition : all 1s;
  }

  &.pre .title1 {
    opacity : 0.01;
    -webkit-transform: translateY(150px);
  }

  &.enter .title1 {
    -webkit-transform: translateY(0);
    -webkit-transition : all 0.5s 0.2s;
  }

  .title2 {
    position : absolute;
    width    : 163px;
    height   : 28px;
    top      : 40px;
    right    : 35px;
    background-position: -80px 0;
    -webkit-transform  : translateY(150px);
    -webkit-transition : all 0.5s 0.5s;
  }

  &.pre .title2 {
    opacity : 0.01;
    -webkit-transform: translateY(150px);
  }

  &.enter .title2 {
    -webkit-transform: translateY(0);
    -webkit-transition : all 1s 0.2s;
  }

  .subtitle {
    position    : absolute;
    width       : 100%;
    height      : 20px;
    left        : 0;
    top         : 75px;
    font-size   : 12px;
    line-height : 20px;
    color       : #fff;
    text-align  : center;
    opacity     : 0.01;
  }

  &.enter .subtitle {
    opacity: 1;
    -webkit-transition : all 1s 1s;
  }

  .board {
    position      : absolute;
    width         : 255px;
    height        : 142px;
    top           : 120px;
    left          : 50%;
    margin-left   : -127px;
    background    : #fff;
    border-radius : 20px;
    box-shadow    : 0 10px 20px;
    opacity       : 0.01;

    .one {
      position   : absolute;
      width      : 5px;
      height     : 34px;
      left       : 32px;
      top        : 50%;
      margin-top : -17px;
      background-position : 0 -35px;
    }

    &.moving .one {
      -webkit-transform: translateX(0px) scale(1.3, 1.3);
      -webkit-transition: all 1s;
    }

    &.answer .one {
      -webkit-transform: translateX(59px) scale(1, 1);
      -webkit-transition: all 0.8s;
    }

    .words {
      position   : absolute;
      width      : 174px;
      height     : 34px;
      right      : 35px;
      top        : 50%;
      margin-top : -17px;
      background-position : -10px -35px;
    }
  }

  &.enter .board {
    opacity : 1;
    -webkit-transition : all 1s 1s;
  }

  &.leave .board {
    opacity : 1;
    -webkit-transform  : scale(0.8, 0.8) translateY(65px);
    -webkit-transition : all 1s 1s;
  }

  .tip {
    position    : absolute;
    width       : 100px;
    height      : 110px;
    bottom      : 30px;
    left        : 50%;
    margin-left : -50px;
    opacity     : 0.01;

    .arrow {
      position    : absolute;
      width       : 12px;
      height      : 52px;
      top         : -20px;
      left        : 50%;
      margin-left : -6px;
      -webkit-transform : rotate(90deg);
    }

    .hand {
      position    : absolute;
      width       : 67px;
      height      : 51px;
      top         : 20px;
      left        : 50%;
      margin-left : -34px;
      -webkit-transform : rotate(90deg);
      -webkit-animation : sliderighttip 2s infinite;
    }

    .words {
      position    : absolute;
      width       : 100%;
      height      : 20px;
      left        : 0;
      bottom      : 0;
      font-size   : 12px;
      line-height : 20px;
      color       : #fff;
      text-align  : center;
    }
  }

  &.enter .tip {
    opacity: 1;
    -webkit-transition : all 2s 0.5s;
  }

  &.leave .title1,
  &.leave .title2,
  &.leave .subtitle,
  &.leave .tip {
    opacity: 0.01;
    -webkit-transform: translateY(0);
    -webkit-transition: all 1s;
  }

  @-webkit-keyframes sliderighttip {
    0%   { -webkit-transform: rotate(70deg); }
    90%  { -webkit-transform: rotate(90deg); }
    100% { -webkit-transform: rotate(70deg); }
  }
}

.titlepage {
  display    : none;
  position   : fixed;
  z-index    : 1000;
  left       : 0;
  top        : 0;
  right      : 0;
  bottom     : 0;
  background : rgba(0, 0, 0, 0.8);

  .logo {
    position           : absolute;
    width              : 82px;
    height             : 43px;
    top                : 10px;
    left               : 50%;
    margin-left        : -43px;
    background         : url("../images/logo.png") center center no-repeat;
    background-size    : 100% 100%;
    -webkit-transition : all 0.5s ease 0.1s;
  }

  &.hidden .logo {
    opacity            : 0.01;
    -webkit-transform  : translateY(-50px);
    -webkit-transition : all 1s ease 1s;
  }

  .title {
    position           : absolute;
    width              : 238px;
    height             : 109px;
    top                : 63px;
    left               : 50%;
    margin-left        : -119px;
    -webkit-transition : all 0.5s ease;

    div {
      display         : none;
      position        : absolute;
      width           : 100%;
      height          : 100%;
      left            : 0;
      top             : 0;
      background      : url("../images/titleandtip.png") no-repeat;
      background-size : 238px 500px;
    }

    .title1 {
      background-position : 0 -55px;
    }

    .title2 {
      background-position : 0 -165px;
    }

    .title3 {
      background-position : 0 -275px;
    }
  }

  &.hidden .title {
    opacity            : 0.01;
    -webkit-transform  : translateY(-50px);
    -webkit-transition : all 0.5s ease 1.2s;
  }

  &.s1 .title1,
  &.s2 .title2,
  &.s3 .title3 {
    display : block;
  }

  .tip {
    position           : absolute;
    width              : 100px;
    height             : 90px;
    bottom             : 30px;
    left               : 50%;
    margin-left        : -50px;
    opacity            : 1;
    -webkit-transition : 2s 1s;
  }

  &.hidden .tip {
    opacity            : 0.01;
    -webkit-transition : 1s;
  }

  .arrow {
    position : absolute;
    width    : 12px;
    height   : 52px;
    left     : 7px;
    top      : 0;
  }

  .hand {
    position : absolute;
    width    : 67px;
    height   : 51px;
    right    : 7px;
    top      : 0;
    -webkit-animation        : slideuptip 2s infinite;
    -webkit-transform-origin : 100% 50%;
  }

  .words {
    position    : absolute;
    width       : 100%;
    height      : 20px;
    left        : 0;
    bottom      : 0;
    font-size   : 12px;
    line-height : 20px;
    color       : #fff;
    text-align  : center;
  }

  @-webkit-keyframes slideuptip {
    0%   { -webkit-transform: rotate(-15deg); }
    90%  { -webkit-transform: rotate(5deg);   }
    100% { -webkit-transform: rotate(-15deg); }
  }
}

.page3 {
  position        : fixed;
  z-index         : 300;
  width           : 100%;
  height          : 0;
  left            : 0;
  bottom          : 0;
  padding-bottom  : 250%;
  background      : url("../images/bg3.jpg") no-repeat;
  background-size : 100% 100%;

  .person, .star {
    background      : url("../images/page3.png") no-repeat;
    background-size : 200px 225px;
  }

  .tip-bottom {
    position    : absolute;
    width       : 160px;
    height      : 240px;
    bottom      : 20px;
    left        : 50%;
    margin-left : -80px;

    .person {
      position    : absolute;
      width       : 99px;
      height      : 211px;
      top         : 0;
      left        : 50%;
      margin-left : -20px;
      background-position : 0 0;
    }

    .words {
      position    : absolute;
      width       : 100%;
      height      : 20px;
      left        : 0;
      bottom      : 0;
      font-size   : 12px;
      line-height : 20px;
      color       : #fff;
      text-align  : center;
    }
  }

  .tip-top {
    position    : absolute;
    width       : 100px;
    height      : 100px;
    top         : 20%;
    left        : 50%;
    margin-left : -50px;
    opacity     : 0.01;
    -webkit-transition: all 1s;

    .arrow {
      position    : absolute;
      width       : 12px;
      height      : 52px;
      top         : -20px;
      left        : 50%;
      margin-left : -6px;
      -webkit-transform : rotate(90deg) rotateX(180deg);
    }

    .hand {
      position    : absolute;
      width       : 67px;
      height      : 51px;
      top         : 20px;
      left        : 50%;
      margin-left : -34px;
      -webkit-transform : rotate(90deg);
      -webkit-animation : slidelefttip 2s infinite;
    }
  }

  &.top .tip-top {
    opacity: 1;
    -webkit-transition: all 2s 2s;
  }

  @-webkit-keyframes slidelefttip {
    0%   { -webkit-transform: rotate(70deg); }
    10%  { -webkit-transform: rotate(90deg); }
    100% { -webkit-transform: rotate(70deg); }
  }

  .meteor {
    position    : absolute;
    width       : 100%;
    height      : 0;
    top         : 30px;
    left        : 0;
    padding-top : 100%;

    .star {
      position : absolute;
      width    : 5px;
      height   : 220px;
      right    : -10%;
    }

    .star1 {
      top: -10%;
      background-position: -100px 0;
      -webkit-animation: star 6s infinite;
    }

    .star2 {
      top: 5%;
      background-position: -110px 0;
      -webkit-animation: star 8s infinite;
    }

    .star3 {
      top: 15%;
      background-position: -120px 0;
      -webkit-animation: star 4s infinite;
    }

    .star4 {
      top: 20%;
      background-position: -130px 0;
      -webkit-animation: star 2s infinite;
    }

    .star5 {
      top: 35%;
      background-position: -140px 0;
      -webkit-animation: star 6.4s infinite;
    }

    .star6 {
      top: 55%;
      background-position: -150px 0;
      -webkit-animation: star 5.2s infinite;
    }

    @-webkit-keyframes star {
      0%   { -webkit-transform: rotate(-80deg) translateY(0px);     }
      100% { -webkit-transform: rotate(-80deg) translateY(-1500px); }
    }
  }
}

.page4 {

  position : absolute;
  z-index  : 200;

  .tip-top, .mogu, .lip {
    background      : url("../images/page4.png") no-repeat;
    background-size : 200px 800px;
  }

  .tip-top {
    position    : absolute;
    width       : 123px;
    height      : 127px;
    left        : 50%;
    top         : 50%;
    margin-left : -121px;
    margin-top  : -172px;
  }

  .tip1 {
    opacity: 1;
    background-position: 0 0;
  }

  &.moving .tip1, &.touch .tip1, &.moving .tip3 {
    opacity: 0.01;
    -webkit-transition: all 1s 1s;
  }

  .tip3 {
    opacity: 0.01;
    background-position: 0 -600px;
  }

  &.touch .tip3 {
    opacity: 1;
    -webkit-transition: all 1s 1s;
  }

  .tip2 {
    opacity: 0.01;
    background-position: 0 -130px;
  }

  &.moving .tip2 {
    opacity: 1;
    -webkit-transition: all 1s 2s;
  }

  &.moving.leave .tip2 {
    opacity: 0.01;
    -webkit-transition: all 2s;
  }

  .mogu {
    position    : absolute;
    width       : 167px;
    height      : 196px;
    left        : 50%;
    top         : 50%;
    margin-left : -83px;
    margin-top  : -98px;
    background-position : 0 -395px;
  }

  &.moving .mogu {
    display: none;
  }

  .ani-mogu {
    display     : none;
    position    : absolute;
    width       : 189px;
    height      : 219px;
    left        : 50%;
    top         : 50%;
    margin-left : -94px;
    margin-top  : -109px;
  }

  &.moving .ani-mogu {
    display: block;
  }

  .tip-bottom {
    position    : absolute;
    width       : 120px;
    height      : 150px;
    bottom      : 20px;
    left        : 50%;
    margin-left : -60px;
    opacity     : 1;
  }

  &.moving .tip-bottom {
    opacity: 0.01;
    -webkit-transition: all 2s;
  }

  .lip {
    position : absolute;
    width    : 120px;
    height   : 120px;
    left     : 0;
    top      : 0;
    background-position: 0 -265px;
    -webkit-animation: dance 0.5s infinite;
  }

  @-webkit-keyframes dance {
    0%   { -webkit-transform: rotate(0deg);  }
    50%  { -webkit-transform: rotate(30deg); }
    100% { -webkit-transform: rotate(0deg);  }
  }

  .words {
    position    : absolute;
    width       : 100%;
    height      : 20px;
    left        : 0;
    bottom      : 0;
    font-size   : 12px;
    line-height : 20px;
    color       : #fff;
    text-align  : center;
  }
}

.page5 {
  position : absolute;
  z-index  : 100;

  .share .words, .share-btn, .refresh-btn, .home-btn {
    background      : url("../images/page5.png") no-repeat;
    background-size : 243px 260px;
  }

  .logo {
    position        : absolute;
    width           : 82px;
    height          : 43px;
    top             : 10px;
    left            : 50%;
    margin-left     : -43px;
    background      : url("../images/logo.png") center center no-repeat;
    background-size : 100% 100%;
    opacity : 0.01;
    -webkit-transform : scale(0.1, 0.1);
  }

  .title {
    position            : absolute;
    width               : 238px;
    height              : 109px;
    top                 : 63px;
    left                : 50%;
    margin-left         : -119px;
    background          : url("../images/titleandtip.png") no-repeat;
    background-size     : 238px 500px;
    background-position : 0 -385px;
    opacity : 0.01;
    -webkit-transform: scale(0.1, 0.1);
  }

  &.enter .logo, &.enter .title {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -webkit-transition: all 1s 1s;
  }

  .words1 {
    position    : absolute;
    width       : 100%;
    hieght      : 80px;
    left        : 0;
    top         : 205px;
    font-size   : 12px;
    line-height : 24px;
    color       : #fff;
    text-align  : center;
    opacity     : 0.5;
  }

  .words2 {
    position    : absolute;
    width       : 100%;
    hieght      : 30px;
    left        : 0;
    top         : 280px;
    font-size   : 18px;
    line-height : 30px;
    color       : #fff;
    text-align  : center;
  }

  span {
    opacity: 0.01;
  }

  &.enter .ws1 {
    opacity: 1;
    -webkit-transition: all 1s 2s;
  }

  &.enter .ws2 {
    opacity: 1;
    -webkit-transition: all 1s 3.5s;
  }

  &.enter .ws3 {
    opacity: 1;
    -webkit-transition: all 1s 5s;
  }

  &.enter .ws4 {
    opacity: 1;
    -webkit-transition: all 1s 6.5s;
  }

  &.enter .ws5 {
    opacity: 1;
    -webkit-transition: all 1s 8s;
  }

  .share-btn {
    display     : block;
    position    : absolute;
    width       : 214px;
    height      : 58px;
    bottom      : 55px;
    left        : 50%;
    margin-left : -107px;
    background-position: 0 -105px;
    -webkit-transform: translateY(300px);
  }

  &.enter .share-btn {
    -webkit-transform  : translateY(0);
    -webkit-transition : all 0.5s 9.5s;
  }

  &.leave .share-btn {
    display : none;
  }

  .home-btn {
    display     : none;
    position    : absolute;
    width       : 214px;
    height      : 58px;
    bottom      : 55px;
    left        : 50%;
    margin-left : -107px;
    background-position: 0 -195px;
  }

  &.leave .home-btn {
    display : block;
  }

  .refresh-btn {
    display     : block;
    position    : absolute;
    width       : 109px;
    height      : 18px;
    bottom      : 20px;
    left        : 50%;
    margin-left : -54px;
    background-position : 0 -170px;
    -webkit-transform: translateY(300px);
  }

  &.enter .refresh-btn {
    -webkit-transform: translateY(0);
    -webkit-transition: all 0.5s 9.6s;
  }

  .share {
    display    : none;
    position   : fixed;
    z-index    : 1;
    left       : 0;
    top        : 0;
    right      : 0;
    bottom     : 0;
    background : rgba(0, 0, 0, 0.85);

    .words {
      position    : absolute;
      width       : 243px;
      height      : 98px;
      top         : 10%;
      left        : 50%;
      margin-left : -120px;
      background-position : 0 0;
    }
  }

  &.s-share .share {
    display: block;
  }
}
